<!--Lab2新增-商品详情界面-->
<script setup lang="ts">
import {ref} from 'vue'
import {useRoute} from 'vue-router';
import {productInfo,changeQuantity,getComment} from "../../api/product.ts";
import {parseCategory, parseTime} from "../../utils";
import CreateOrder from "../../components/CreateOrder.vue";
import Comment from "../../components/Comment.vue";
import PayDialog from "../../components/PayDialog.vue";

const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])
const orderId = ref()
const commentInfo = ref<any[]>([])
const route = useRoute();
const productId = Number(route.params.productId);
const role = sessionStorage.getItem("role")
const staffId = ref()
const openDialog = ref(false)
const openPayDialog = ref(false)
if(role == "STAFF"){
  staffId.value = sessionStorage.getItem("storeId")
}
const score = ref()
const count = ref()
const storeId = ref('')
const name = ref('')
const category = ref('')
const photoUrl = ref([])
const quantity = ref()
const price = ref()
const createTime = ref('')
const addquantity = ref()
getinfo()
function getinfo() {
  productInfo(productId).then(res => {
    name.value = res.data.result.name
    storeId.value = res.data.result.storeId
    category.value = res.data.result.category
    photoUrl.value = res.data.result.photoUrl
    quantity.value = res.data.result.quantity
    price.value = res.data.result.price
    createTime.value = parseTime(res.data.result.createTime)
    score.value = res.data.result.rating
    score.value = Number(score.value.toFixed(1))
    count.value = res.data.result.commentNumber
  })
}
getComment(productId).then(res => {
  commentInfo.value = res.data.result
})

function openPay(id : number){
  openDialog.value = false
  orderId.value = id
  openPayDialog.value = true
}

function addQuantity(){
  changeQuantity({
    ID : productId,
    newQuantity : quantity.value + addquantity.value
  }).then(res =>{
    if (res.data.code === '000') {
      quantity.value = quantity.value + addquantity.value
      ElMessage({
        message: "增加库存成功",
        type: 'success',
        center: true,
      })
      addquantity.value = null;
    }
    else {
      ElMessage({
        message: res.data.message,
        type: 'error',
        center: true,
      })
    }
  })
}


</script>


<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside width="25%" class="page-aside">
      <el-card>
        <el-descriptions title="商品信息" :column="1">
          <el-descriptions-item label="商品名">{{ name }}</el-descriptions-item>
          <el-descriptions-item label="种类">{{ parseCategory(category) }}</el-descriptions-item>
          <el-descriptions-item label="库存">{{ quantity }}个</el-descriptions-item>
          <el-descriptions-item label="单价">{{ price }}元</el-descriptions-item>
          <el-descriptions-item label="上架时间">{{ createTime }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-form-item v-if="role == 'STAFF' && staffId == storeId">
        <el-divider></el-divider>
          <label>增加库存</label>
          <el-input-number v-model="addquantity"></el-input-number>
          <el-button @click.prevent="addQuantity">增加</el-button>
      </el-form-item>
      <el-button  v-if = "role == 'CUSTOMER'" @click="openDialog = true">购买商品</el-button>
      <el-dialog v-model = "openDialog" title = "创建订单" width = "600" >
        <CreateOrder :product-id = "productId" @open = "openPay"></CreateOrder>
      </el-dialog>

      <el-dialog v-model = "openPayDialog" title = "支付" width = "600" >
        <payDialog :orderId="orderId" @finish = "openPayDialog = false" ></payDialog>

      </el-dialog>




    </el-aside>

    <!-- 主要内容 -->
    <el-main>
      <div class="product-header">
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="(item, index) in photoUrl" :key="index">
            <div class="carousel-item-wrapper">
              <el-image :src="item" fit="cover" class="product-image"></el-image>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div>
        <el-space direction="vertical">
      <el-rate
          v-model = "score"
          disabled
          show-score
          text-color="#99A9BF"
          score-template="{value}分"
          :colors="colors">
      </el-rate>
        <el-text>已有{{count}}人评分</el-text>
        </el-space>
      </div>
      <el-divider></el-divider>
      <div class="vertical-cards">
        <Comment v-for = "n in commentInfo" :id="n.orderID" class="vertical-card"></Comment>

      </div>

    </el-main>
  </el-container>
</template>

<style scoped>
.page-aside {
  background-color: #f0f2f5;
  padding: 20px;
}

.product-header {
  text-align: center;
  margin-bottom: 20px;
}

.product-image {
  height: 300px;
}

.carousel-item-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
 .vertical-cards {
   display: flex;
   flex-direction: column; /* 竖向排列 */
 }

.vertical-card {
  margin-bottom: 10px; /* 控制卡片之间的间距 */
}

</style>
